import React, { useState } from 'react';
import { Form, Button, Input, Modal, Row, Col, Tag, Select } from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const DetailsForm = (props) => {
  const [formVals, setFormVals] = useState({
    id: props.values.id,
    appjobname: props.values.appjobname,
    cfield: props.values.cfield,
    checkValue: props.values.checkValue,
    descr: props.values.descr,
    /* jobClassName: props.values.jobClassName, */
    jobcron: props.values.jobcron,
    jobkey: props.values.jobkey,
    params: props.values.params,
    remarks: props.values.remarks,
    requestMethod: props.values.requestMethod,
    requestUrl: props.values.requestUrl,
    responseStatus: props.values.responseStatus,
    restime: props.values.restime,
    result: props.values.result,
    status: props.values.status,
    updatetime: props.values.updatetime,
  });
  const [form] = Form.useForm();
  // const {Option} = Select;
  const {
    onSubmit: handleUpdate,
    onCancel: handleDetailModalVisible,
    detailModalVisible,
    values,
    detailType,
  } = props;

  const validateMessages = {
    // eslint-disable-next-line no-template-curly-in-string
    required: '${label}是必填的!',
    types: {
      // eslint-disable-next-line no-template-curly-in-string
      url: '${label}不是有效的url地址!',
    },
  };

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    setFormVals({ ...formVals, ...fieldsValue });
    handleUpdate({ ...formVals, ...fieldsValue });
  };

  const { Option } = Select;
  const { TextArea } = Input;
  const renderContent = () => {
    return (
      <>
        <Row gutter={16}>
          <Col className="gutter-row" span={0}>
            <FormItem name="id" label="id">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="appjobname" label="监控名称" required rules={[{ required: true }]}>
              <Input placeholder="请输入英文格式" />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="jobkey" label="任务key" required rules={[{ required: true }]}>
              <Input placeholder="请输入英文格式" />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="descr" label="接口描述" required rules={[{ required: true }]}>
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="jobcron" label="监控频率" required rules={[{ required: true }]}>
              <Input />
            </FormItem>
          </Col>
          {/*          <Col span={12} className="gutter-row">
            <FormItem name="jobClassName" label="执行类" required rules={[{ required: true }]}>
              <Input />
            </FormItem>
          </Col> */}
          <Col span={12} className="gutter-row">
            <FormItem name="cfield" label="比对字段">
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="checkValue" label="校验值" required rules={[{ required: true }]}>
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="requestMethod" label="请求方法" required rules={[{ required: true }]}>
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="请选择请求方式"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="GET">GET</Option>
                <Option value="HTTP-GET">HTTP-GET</Option>
                <Option value="FORM-POST">FORM-POST</Option>
                <Option value="JSON-POST">JSON-POST</Option>
              </Select>
            </FormItem>
          </Col>
          <Col className="gutter-row" span={detailType === 'query' ? 12 : 0}>
            <FormItem name="status" label="job状态">
              {formVals.status === '0' ? (
                <Tag color="#ff4d4f">执行中</Tag>
              ) : (
                <Tag color="#FFB800">暂停中</Tag>
              )}
            </FormItem>
          </Col>
          <Col className="gutter-row" span={detailType === 'query' ? 12 : 0}>
            <FormItem name="updatetime" label="更新时间">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={19} pull={2}>
            <FormItem
              name="requestUrl"
              label="请求地址"
              required
              rules={[{ type: 'url' }, { required: true }]}
            >
              <TextArea rows={2} />
            </FormItem>
          </Col>
          <Col span={19} className="gutter-row" pull={2}>
            <FormItem name="params" label="请求参数">
              <TextArea rows={4} />
            </FormItem>
          </Col>
          <Col span={19} className="gutter-row" pull={2}>
            <FormItem name="remarks" label="接口备注">
              <TextArea rows={2} />
            </FormItem>
          </Col>
        </Row>
      </>
    );
  };

  const renderFooter = () => {
    return (
      <>
        <Button
          onClick={() => handleDetailModalVisible(false, values)}
          style={{ display: detailType === 'query' ? '' : 'none' }}
        >
          确认
        </Button>
        <Button
          type="primary"
          onClick={() => handleNext()}
          style={{ display: detailType === 'edit' ? '' : 'none' }}
        >
          更新
        </Button>
        <Button
          type="primary"
          onClick={() => handleNext()}
          style={{ display: detailType === 'add' ? '' : 'none' }}
        >
          提交
        </Button>
        <Button
          onClick={() => handleDetailModalVisible(false, values)}
          style={{ display: detailType !== 'query' ? '' : 'none' }}
        >
          取消
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={880}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title={detailType === 'edit' ? '更新接口' : '新增接口'}
      visible={detailModalVisible}
      footer={renderFooter()}
      onCancel={() => handleDetailModalVisible()}
    >
      <Form
        layout="horizontal"
        {...formLayout}
        form={form}
        initialValues={{
          id: formVals.id,
          appjobname: formVals.appjobname,
          cfield: formVals.cfield,
          checkValue: formVals.checkValue,
          descr: formVals.descr,
          /* jobClassName: formVals.jobClassName, */
          jobcron: formVals.jobcron,
          jobkey: formVals.jobkey,
          params: formVals.params,
          remarks: formVals.remarks,
          requestMethod: formVals.requestMethod,
          requestUrl: formVals.requestUrl,
          responseStatus: formVals.responseStatus,
          restime: formVals.restime,
          result: formVals.result,
          status: formVals.status,
          updatetime: formVals.updatetime,
        }}
        validateMessages={validateMessages}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default DetailsForm;
